<template>
  <div class="flex items-center">
    <div class="flex-1 border border-black/50 rounded p-1" v-if="previewList.length > 0">
      <div v-for="(item, index) in previewList" :key="index">
        <span>
          {{ index == 0 ? '' : '但小于' }}{{ item.msgCount }}条消息每{{ item.perSecond }}秒{{
            index == previewList.length - 1 ? '。' : '，'
          }}
          <br />
        </span>
      </div>
    </div>
    <div v-else class="flex-1 border border-black/50 rounded p-1"> 未配置 </div>
    <a-button type="text" :icon="h(PlusCircleOutlined)" shape="circle" @click="openModal(true)" />
  </div>
  <AddModal @register="registerModal" @add-limits="handleAdd" />
</template>

<script lang="ts" setup>
  import { h, ref, watch } from 'vue';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import { useModal } from '/@/components/Modal';
  import AddModal from './AddModal.vue';

  const props = defineProps({
    index: { type: String, default: '' },
    data: { type: Object, default: () => {} },
  });
  const emits = defineEmits(['mergeData']);
  const [registerModal, { openModal }] = useModal();
  const previewList = ref<Array<Recordable>>([]);
  function handleAdd(list: Recordable[]) {
    previewList.value = list;

    emits('mergeData', props.index, list);
  }

  watch(
    () => props.data,
    (nVal) => {
      if (nVal[props.index]) {
        nVal[props.index]?.split(',').forEach((item) => {
          const arr = item.split(':');
          previewList.value.push({ msgCount: arr[0], perSecond: arr[1] });
        });
      }
    },
    {
      immediate: false,
      deep: true,
    },
  );
</script>
